<template>
  <div class="admin-profile">
    <el-card>
      <template #header>
        <div class="card-header">
          <h2>个人信息</h2>
          <el-button 
            :type="isEditing ? 'primary' : 'default'" 
            @click="isEditing ? saveUserInfo() : startEditing()"
          >
            {{ isEditing ? '保存' : '修改' }}
          </el-button>
        </div>
      </template>

      <el-form :model="userInfo" label-width="120px">
        <el-form-item label="用户名">
          <el-input v-model="userInfo.username" :disabled="!isEditing"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-tag :type="getRoleType(userInfo.role)">{{ getRoleText(userInfo.role) }}</el-tag>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="userInfo.phone" :disabled="!isEditing"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱">
          <el-input v-model="userInfo.email" :disabled="!isEditing"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input type="textarea" v-model="roleDescription" disabled></el-input>
        </el-form-item>
        <el-form-item label="角色权限">
          <el-tag
            v-for="permission in getRolePermissions(userInfo.role)"
            :key="permission.name"
            type="info"
            effect="plain"
            class="permission-tag"
          >
            {{ permission.name }}
          </el-tag>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const userInfo = ref({
  username: 'admin',
  role: 'admin',
  phone: '13800138000',
  email: 'admin@example.com'
})
const roleDescription = ref('')
const isEditing = ref(false)

// 获取用户信息（使用模拟数据）
const fetchUserInfo = () => {
  // 模拟从后端获取的数据
  const mockUserData = {
    username: 'admin',
    role: 'admin',
    phone: '13800138000',
    email: 'admin@example.com'
  }
  userInfo.value = mockUserData
  roleDescription.value = getRoleDescription(mockUserData.role)
}

// 更新用户信息（使用模拟数据）
const updateProfile = async (userData) => {
  // 模拟API调用延迟
  await new Promise(resolve => setTimeout(resolve, 500))
  return {
    data: {
      ...userData,
      updatedAt: new Date().toISOString()
    }
  }
}

// 获取角色类型样式
const getRoleType = (role) => {
  const typeMap = {
    admin: 'danger',
    purchaser: 'warning',
    salesman: 'success',
    deliveryman: 'info',
    customer: 'primary'
  }
  return typeMap[role] || 'info'
}

// 获取角色文本
const getRoleText = (role) => {
  const textMap = {
    admin: '系统管理员',
    purchaser: '采购员',
    salesman: '销售员',
    deliveryman: '配送员',
    customer: '客户'
  }
  return textMap[role] || '未知角色'
}

// 获取角色描述
const getRoleDescription = (role) => {
  const descriptionMap = {
    admin: '系统管理员可以管理所有用户、订单、产品和配送任务，并查看系统统计数据。',
    purchaser: '采购员负责管理产品库存，处理采购订单，确保产品供应充足。',
    salesman: '销售员负责处理客户订单，管理客户关系，跟踪订单状态。',
    deliveryman: '配送员负责处理配送任务，更新配送状态，确保订单及时送达。',
    customer: '客户可以浏览产品，下单购买，查看订单状态。'
  }
  return descriptionMap[role] || '暂无角色描述'
}

// 获取角色权限
const getRolePermissions = (role) => {
  const permissionsMap = {
    admin: [
      { name: '用户管理' },
      { name: '订单管理' },
      { name: '产品管理' },
      { name: '配送管理' },
      { name: '数据统计' }
    ],
    purchaser: [
      { name: '产品管理' },
      { name: '库存管理' },
      { name: '采购统计' }
    ],
    salesman: [
      { name: '订单管理' },
      { name: '客户管理' },
      { name: '销售统计' }
    ],
    deliveryman: [
      { name: '配送任务管理' },
      { name: '状态更新' },
      { name: '配送统计' }
    ],
    customer: [
      { name: '产品浏览' },
      { name: '订单管理' },
      { name: '个人中心' }
    ]
  }
  return permissionsMap[role] || []
}

// 开始编辑
const startEditing = () => {
  isEditing.value = true
}

// 保存用户信息
const saveUserInfo = async () => {
  try {
    const response = await updateProfile(userInfo.value)
    userStore.setUser(response.data)
    ElMessage.success('个人信息保存成功')
    isEditing.value = false
  } catch (error) {
    ElMessage.error('保存用户信息失败')
  }
}

onMounted(() => {
  fetchUserInfo()
})
</script>

<style scoped>
.admin-profile {
  padding: 24px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.permission-tag {
  margin-right: 8px;
  margin-bottom: 8px;
}
</style> 